<template>
	<div>
	<home-header ></home-header>
	<home-swiper :list="swiperList"></home-swiper>
	<home-icons :list="iconList"></home-icons>
	<home-recommend :list="recommendList"></home-recommend>
	<home-weekend :list="weekendList"></home-weekend>
	
	</div>
</template>
 
<script>
	import HomeHeader from './components/Header'
	import HomeSwiper from './components/Swiper'
	import HomeIcons from './components/Icons'
	import HomeRecommend from './components/Recommend'
	import HomeWeekend from './components/Weekend'
	import axios from 'axios'
	import {mapState} from 'vuex'
	export default {
		name: 'Home',  
		components: {
			HomeHeader: HomeHeader,
			HomeSwiper: HomeSwiper,
			HomeIcons,
			HomeRecommend,
			HomeWeekend
		},
		data() {
			return {
				swiperList: [],
				iconList:[],
				recommendList:[],
				weekendList:[],
				lastCity:''
			}
		},
		computed: {
			...mapState(['city'])
		},
		methods:{
			getHomeInfo(){
				axios.get('/api/index.json?city=' + this.city)
				.then(this.getHomeInfoSucc)
			},
			getHomeInfoSucc(res){
				res=res.data;
				if(res.ret && res.data){
					const data = res.data;
					
					this.swiperList = data.swiperList;
					this.iconList = data.iconList;
					this.recommendList = data.recommendList;
					this.weekendList = data.weekendList;
				}
			
			}
		},
		mounted () { 
			console.log('mounted')
			this.getHomeInfo()
			
			this.lastCity = this.city
		},
		activated () {
			console.log('activated')
			//每次页面重新显示时，会执行activated生命周期函数
			//判断是否重新选择城市，重新则重新发一次ajax请求
			if (this.lastCity !== this.city) {
				this.lastCity = this.city
				this.getHomeInfo()
			}
		}
	}
</script>

<style>

</style>